<template>
  <div class="login-root">
    <div class="login-form">
      <div class="title">ZX-VUE-NEXT</div>
      <el-form
          ref="formEl"
          :model="state.loginForm"
          :rules="state.loginRules"
          class="demo-ruleForm"
          status-icon
      >
        <el-form-item label="" prop="username">
          <el-input
              v-model="state.loginForm.username"
              clearable
              placeholder="请输入用户名"
          />
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input
              v-model="state.loginForm.password"
              type="password"
              clearable
              placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item label="" prop="code">
          <div class="code-view">
            <div>
              <el-input
                  v-model="state.loginForm.code"
                  clearable
                  style="width: 100%"
                  placeholder="请输入验证码"
              />
            </div>
            <div @click="getCodeUrl">
              <img :src="state.codeImg" style="width: 100%; height: 100%"/>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
              type="primary"
              @click="login"
              class="btn"
              v-loading="state.btnloging"
          >登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {getInfoFun, getUerInfoFun, loginFun} from '../../api/login'
import {userInfo} from '../../stores/userInfo'
import {initBackEndControlRoutes} from '../../router/backEnd'
import {getCodeImg} from '../../api/login'
import {Session} from '../../utils/storage'

const formEl = ref()
const state = reactive({
  router: useRouter(),
  route: useRoute(),
  btnloging: false,
  codeImg: '',
  loginForm: {
    username: '',
    password: '',
    code: '',
    uuid: '',
  },
  loginRules: {
    username: [{required: true, message: '用户名不能为空', trigger: 'blur'}],
    password: [{required: true, message: '密码不能为空', trigger: 'blur'}],
    code: [{required: true, message: '验证码不能为空', trigger: 'blur'}],
  },
})

onMounted(() => {
  getCodeUrl()
})

// 获取验证码
const getCodeUrl = () => {
  getCodeImg().then((res) => {
    state.codeImg = 'data:image/gif;base64,' + res.img
    state.loginForm.uuid = res.uuid
  })
}

const login = async () => {
  // state.btnloging = true
  await formEl.value.validate((valid: any, fields: any) => {
    if (valid) {
      // 登录方法
      loginFun(state.loginForm).then((res: any) => {
        // 保存token
        Session.set('token', res.token)
        // 获取用户基本信息方法
        getInfoFun().then(async (info: any) => {
          // 保存用户基本信息
          await userInfo().setUserInfos(info)
          // 进行路由跳转
          siginSuccess()
        })
      })
    } else {
      state.btnloging = false
    }
  })
}

const siginSuccess = () => {
  // 跳转到上次关闭的页面
  if (state.route.query?.redirect) {
    state.router.push({
      path: <string>state.route.query?.redirect,
      query:
          Object.keys(<string>state.route.query?.params).length > 0
              ? JSON.parse(<string>state.route.query?.params)
              : '',
    })
  } else {
    // 跳转到首页
    state.router.push('/')
  }
}
</script>

<style scoped>
:deep(.el-input__wrapper) {
  height: 40px;
  line-height: 40px;
}

:deep(.el-form-item:nth-child(1)) {
  margin-top: 30px;
}

:deep(.el-form-item) {
  margin-bottom: 25px;
}
</style>

<style scoped lang="scss">
.login-root {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/login_bg.jpeg');

  .login-form {
    position: absolute;
    right: 252px;
    bottom: 343px;
    width: 473px;
    height: 380px;
    background-color: #fcfcfc;
    border-radius: 5px;
    opacity: 0.8;
    padding: 30px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .title {
      color: #333;
      line-height: 60px;
      font-size: 36px;
    }

    .btn {
      width: 100%;
      height: 40px;
    }
  }
}

.code-view {
  display: flex;
  gap: 10px;
  width: 100%;
  align-items: center;

  & > div:nth-child(1) {
    width: 70%;
  }

  & > div:nth-child(2) {
    flex: 1;
    background-color: #305f89;
    border-radius: 3px;
    height: 38px;
    text-align: center;
    line-height: 38px;
    color: white;
    font-size: 19px;
    letter-spacing: 11px;
  }
}
</style>
